<template>
  <!-- 实名认证组件的结构 -->
  <el-card class="box-card">
    <!-- 卡片的头部 -->
    <template #header>
      <div class="card-header">
        <h1>实名信息</h1>
      </div>
    </template>
    <!-- 实名认证结构的提示部分 -->
    <div class="tip" style="color: #7f7f7f">
      <p>
        <el-icon>
          <InfoFilled/>
        </el-icon
        >
        完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
      </p>
    </div>
    <!-- 卡片身体的底部:认证成功的结构、认证未成功的结构 -->
    <el-form ref="userFormRef" :rules="rules" :model="userParam" v-if="orderStore.userInfo?.authStatus===0">
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="userParam.name" placeholder="请输入用户姓名"/>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
        <el-select v-model="userParam.certificatesType" placeholder="请输入证件类型">
          <template v-for="(item,index) in infoStore.cerType" :key="index">
            <el-option :label="item.name" :value="item.value"/>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input v-model="userParam.certificatesNo" placeholder="请输入证件号码"/>
      </el-form-item>
      <el-form-item label="上传证件" prop="certificatesUrl">
        <el-upload
            ref="uploadFileRef"
            action="http://syt.atguigu.cn/api/oss/file/fileUpload?fileHost=userAuah"
            list-type="picture-card"
            :limit=1
            :on-success="successUploadFile"
            :on-exceed="uploadFileOver"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
        >
          <el-icon>
            <img src="@/assets/images/auth_example.png">
          </el-icon>
        </el-upload>

        <!--        图片弹窗-->
        <el-dialog
            v-model="dialogVisible"
            width="500"
        >
          <img :src="userParam.certificatesUrl">
        </el-dialog>
      </el-form-item>
      <el-button class="left" type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form>

    <el-descriptions
        v-if="orderStore.userInfo?.authStatus===1"
        :column="1"
        :size="'default'"
        border
    >

      <el-descriptions-item width="30px">
        <template #label>
          <div class="cell-item">
            用户姓名
          </div>
        </template>
        {{ orderStore.userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            证件类型
          </div>
        </template>
        {{ orderStore.userInfo.certificatesType === 10 ? "身份证" : "户口本" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            证件号码
          </div>
        </template>
        {{ orderStore.userInfo.certificatesNo }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "cerfication"
}
</script>

<script setup lang="ts">
import useOrderStore from "@/store/order";
import {reactive, ref} from "vue";
import useHospitalInfoStore from "@/store/hospital_info";
import {ElMessage} from "element-plus";

const orderStore = useOrderStore();
orderStore.getAuthFlagData()

const infoStore = useHospitalInfoStore();
infoStore.getCerTypeData("CertificatesType")


const userParam = reactive({
  name: "",
  certificatesType: "",
  certificatesNo: "",
  certificatesUrl: ""
})


//图片上传成功时候回调
const successUploadFile = (response: any) => {
  //清除检验结果
  userFormRef.value.clearValidate("certificatesUrl")
  userParam.certificatesUrl = response.data
}

//移除文件file调用
const uploadFileRef = ref()
const handleRemove = () => {
  userParam.certificatesUrl = ""
}


//放大图片调用此方法
const dialogVisible = ref(false)
const handlePictureCardPreview = () => {
  dialogVisible.value = true
}

//文件上传超过限制执行
const uploadFileOver = () => {
  ElMessage({
    type: "error",
    message: "文件上传超过数量限制"
  })
}
//校验form表单
const userFormRef = ref()

//提交
const submit = async () => {
  try {
    await userFormRef.value.validate()
    await orderStore.addAuthInfo(userParam)
    //再次请求判断是否已经验证身份
    orderStore.getAuthFlagData()

    //清除残留数据
    reset()
    ElMessage({
      type: "success",
      message: "提交成功"
    })
  } catch (err) {
    ElMessage({
      type: "error",
      message: "提交失败"
    })
  }
}

//重置
const reset = () => {
  uploadFileRef.value.clearFiles()
  userFormRef.value.resetFields()
  Object.assign(userParam, {
    name: "",
    certificatesType: "",
    certificatesNo: "",
    certificatesUrl: ""
  })
}


//校验表单
const validateName = (rule: any, value: any, callback: any) => {
  const pattern = /^[\u4E00-\u9FA5\uF900-\uFA2D]|[a-zA-Z]$/;
  if (!pattern.test(value)) {
    callback(new Error("姓名不符合规范"))
  } else {
    callback()
  }


}
const validateNo = (rule: any, value: any, callback: any) => {
  const regPsidno = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
  if (regPsidno.test(value)) {
    callback()
  } else {
    callback(new Error("证件号码不符合规范"))
  }
}

const validateUrl = (rule: any, value: any, callback: any) => {
  //移除检验
  if (value) {
    uploadFileRef.value.resetField()
    callback()
  } else {
    callback(new Error("图片必须上传"))
  }
}

const rules = {
  name: [{required: true, validator: validateName, trigger: 'change'}],
  certificatesType: [{required: true, message: "证件类型不能为空", trigger: 'change'}],
  certificatesNo: [{required: true, validator: validateNo, trigger: 'change'}],
  certificatesUrl: [{required: true, validator: validateUrl, trigger: "change"}],
}


</script>

<style scoped lang="less">
.box-card {
  margin-bottom: 50px;

  .tip {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-icon {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .el-form {
    width: 60%;
    margin: 0 auto;

    .left {
      margin-left: 70px;
    }
  }

  .cell-item {
    text-align: center;
  }

  .el-dialog {
    img {
      width: 100%;
      height: 100%;
    }
  }

}
</style>
